//http://boring.youngpup.net/2001/domdrag/

/**
 * 赋予element被拖动的能力
 * elementHeader	必须,鼠标点中时可拉动的部份
 * element			必须,拉动时被拉动的部份
 * dragCanvas		不必须，默认为document.body 
 *
 * element元素可以有以下回调函数:
 * onDragStart()		开始拖动时的回调
 * onDrag(x,y)			拖动中的回调
 * onDragEnd()			拖动结束时的回调
 */
Milan.drag = {
	// 对这个element的引用，一次只能拖拽一个Element
	obj: null , 
	//fixInCanvas:是否固定显示在doc的范围内，默认为true
	init: function(elementHeader, element,dragCanvas,fixInCanvas) {
		if(!element)return;
		// 将 element 存到 header 的 obj 里面，方便 header 拖拽的时候引用
		elementHeader.obj = element;
		// 将 start 绑定到 onmousedown 事件，按下鼠标触发 start
		elementHeader.onmousedown = Milan.drag.start;
		elementHeader.dragCanvas = dragCanvas || null;
		elementHeader.obj.dragCanvas = elementHeader.dragCanvas;
		if (typeof(fixInCanvas)=="undefined")	//真贱，用fixInCanvas||true这种形式居然不行
			fixInCanvas=true;
		elementHeader.obj.fixInCanvas = fixInCanvas;
		
		// 初始化绝对的坐标，因为不是 position = absolute 所以不会起什么作用，但是防止后面 onDrag 的时候 parse 出错了
		if(isNaN(parseInt(element.style.left))) {
			element.style.left = "0px";
		}
		if(isNaN(parseInt(element.style.top))) {
			element.style.top = "0px";
		}
		// 挂上空 Function，初始化这几个成员，在 Drag.init 被调用后才帮定到实际的函数
		element.onDragStart = new Function();
		element.onDragEnd = new Function();
		element.onDrag = new Function();
	},
	// 开始拖拽的绑定，绑定到鼠标的移动的 event 上
	start: function(event) {
		var element = Milan.drag.obj = this.obj;
		// 解决不同浏览器的 event 模型不同的问题
		event = Milan.drag.fixE(event);
		// 看看是不是左键点击
		if(event.which != 1 || (event.target||event.srcElement).getAttribute("onclick")){
			// 除了左键都不起作用
			return true ;
		}
		// 参照这个函数的解释，挂上开始拖拽的钩子
		element.onDragStart();
		// 记录鼠标坐标
		element.lastMouseX = event.clientX;
		element.lastMouseY = event.clientY;
		// 绑定事件
		var canvas = this.dragCanvas || document;
		canvas.onmouseup = Milan.drag.end;
		canvas.onmousemove = Milan.drag.drag;
		return false ;
	}, 
	// Element正在被拖动的函数
	drag: function(event) {
		event = Milan.drag.fixE(event);
		if(event.which == 0 ) {
		 	return Milan.drag.end();
		}
		// 正在被拖动的Element
		var element = Milan.drag.obj;
		if(!element)return false;
		// 鼠标坐标
		var _clientX = event.clientX;
		var _clientY = event.clientY;
		// 如果鼠标没动就什么都不作
		if(element.lastMouseY == _clientY && element.lastMouseX == _clientX) {
			return	false ;
		}
		// 刚才 Element 的坐标
		var _lastX = parseInt(element.style.left);
		var _lastY = parseInt(element.style.top);
		// 计算新的坐标：原先的坐标+鼠标移动的值差
		var newY = _lastY + _clientY - element.lastMouseY;
		var newX = _lastX + _clientX - element.lastMouseX;
		//桌布的大小
		var canvasWidth = Milan.drag.getWidth(this);
		var canvasHeight = Milan.drag.getHeight(this);
		
		if (Milan.drag.obj.fixInCanvas)
		{
			if ((newY+element.offsetHeight)>=canvasHeight)
				newY = canvasHeight - element.offsetHeight;
				
			if ((newX+element.offsetWidth)>=canvasWidth)
				newX  = canvasWidth - element.offsetWidth;
				
			if (newY<0) newY = 0;
			if (newX<0) newX = 0;
		}

		//document.title = newX+" "+newY+" "+_lastX+" "+_lastY+" "+this.clientWidth+" "+this.clientHeight;

		// 编辑 element 的显示坐标
		element.style.left = newX + "px";
		element.style.top = newY + "px";
		
		// 记录 element 现在的坐标供下一次移动使用
		element.lastMouseY = newY-_lastY+element.lastMouseY;
		element.lastMouseX = newX-_lastX+element.lastMouseX;
		
		// 参照这个函数的解释，挂接上 Drag 时的钩子
		element.onDrag(newX, newY);
		return false;
	},
	// Element 正在被释放的函数，停止拖拽
	end: function(event) {
		event = Milan.drag.fixE(event);
		// 解除事件绑定
		this.onmousemove = null;
		this.onmouseup = null;
		// 先记录下 onDragEnd 的钩子，好移除 obj
		if(!Milan.drag.obj)return null;
		var _onDragEndFuc = Milan.drag.obj.onDragEnd();
		// 拖拽完毕，obj 清空
		Milan.drag.obj = null ;
		return _onDragEndFuc;
	},
	// 解决不同浏览器的 event 模型不同的问题
	fixE: function(ig_) {
		if( typeof ig_ == "undefined" ) {
			ig_ = window.event;
		}
		if( typeof ig_.layerX == "undefined" ) {
			ig_.layerX = ig_.offsetX;
		}
		if( typeof ig_.layerY == "undefined" ) {
			ig_.layerY = ig_.offsetY;
		}
		if( typeof ig_.which == "undefined" ) {
			ig_.which = ig_.button;
		}
		return ig_;
	},
	getWidth: function(obj)
	{
		if (obj.getElementById) //如果是document
			return obj.body.clientWidth;
		else
			return obj.offsetWidth;
	},
	getHeight:function(obj)
	{
		if (obj.getElementById) //如果是document
			return obj.body.clientHeight;
		else
			return obj.offsetHeight;
	}
};



